<template>
  <el-form :class="{'mobile-el-form': showMobilePage}" :label-width="showMobilePage?'115px':'100px'" class="customer-form lineHeight32" label-position="right">
    <el-row :gutter="showMobilePage?0:8" :type="showMobilePage?'':'flex'" class="content">
      <el-col :span="labelSpan">
        <el-form-item label="客户来源:">
          <span>{{ detailData.clientSource || '--' }}</span>
        </el-form-item>
        <el-form-item label="标签:">
          <TagSelect v-model="detailData.tag" mode="detail" />
        </el-form-item>
        <el-form-item label="实际客户名称:">
          <span>{{ detailData.actualClientRequired ? '必填' : '非必填' }}</span>
        </el-form-item>
      </el-col>
      <el-col :span="labelSpan">
        <el-form-item label="客户行业:">
          <span>{{ detailData.clientBusiness || '--' }}</span>
        </el-form-item>
        <el-form-item label="备注:">
          <div class="flex-ellipsis">
            <el-tooltip v-if="detailData.remark" :open-delay="800" placement="top" effect="dark">
              <div slot="content" style="max-width: 300px;">{{ detailData.remark || '--' }}</div>
              <span class="overflow">{{ detailData.remark || '--' }}</span>
            </el-tooltip>
            <div v-else>--</div>
            <el-button v-if="hasRouteAuth('crm:customer:edit')" type="text" size="small" class="ml10" @click="handleAddRemark">新增备注</el-button>
            <el-button type="text" size="small" @click="openRemarkLog">历史记录</el-button>
          </div>
        </el-form-item>
      </el-col>
      <el-col :span="labelSpan">
        <el-form-item label="所属集团:">
          <ToolTip :content="detailData.group | formatTag" />
        </el-form-item>
        <el-form-item label="销售:">
          <ToolTip :content="detailData.sale" />
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

<script>
import { getDeptFullName, formatTag } from '@/filters/dept';
import TagSelect from '@/components/Common/tagSelect';
import { hasRouteAuth } from '@/utils/permission';
import { mapState } from 'vuex';

export default {
  filters: {
    getDeptFullName,
    formatTag
  },
  components: { TagSelect },
  props: {
    detailData: {
      type: Object,
      default: () => {
        return {};
      }
    },
    id: {
      type: Number,
      default: 0
    }
  },
  computed: {
    ...mapState({
      'showMobilePage': state => state.app.showMobilePage
    }),
    labelSpan() {
      return this.showMobilePage ? 24 : 8;
    }
  },
  methods: {
    hasRouteAuth,
    handleAddRemark() {
      this.$emit('handleAddRemark');
    },
    openRemarkLog() {
      this.$emit('openRemarkLog');
    }
  }
};
</script>

<style lang="scss" scoped>
.customer-form {
  &::v-deep {
    .el-form-item {
      // height: 30px;
      overflow: hidden;
      margin-bottom: 0px;
      .el-form-item__label {
        color: #999;
      }
    }
  }
  .content{
    .el-col{
      border-right: 1px solid #EBEEFD;
      &:last-of-type{
        border-right: none;
      }
    }
  }
}

.flex-ellipsis{
  display: flex;
  .overflow {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    max-width: 100%;
  }
}
.ml10 {
  margin-left: 10px;
}
</style>
